<!---@components: ToolList: @/views/aitools/components/ToolList/index.vue------>
<template>
  <div class="p-6">
    <div class="max-w-10xl mx-auto grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
      <div
        v-for="tool in tools"
        :key="tool.id"
        :class="[
          'flex min-h-[120px] cursor-pointer items-start gap-5 rounded-xl border-2 bg-white p-6 transition-all duration-300 hover:-translate-y-0.5 hover:transform hover:shadow-xl',
          tool.colorClass
        ]"
        @click="handleToolClick(tool)"
      >
        <!-- 图标区域 -->
        <div class="flex flex-shrink-0 items-center justify-center">
          <!-- 单图标 -->
          <div
            v-if="tool.iconType === 'single'"
            :class="[
              'flex h-12 w-12 items-center justify-center rounded-lg text-2xl font-bold text-white',
              tool.iconBgClass
            ]"
          >
            {{ tool.icon }}
          </div>

          <!-- 双图标组合 -->
          <div v-else-if="tool.iconType === 'double'" class="flex items-center gap-1">
            <div
              :class="[
                'flex h-10 w-10 items-center justify-center rounded-md text-lg',
                tool.icon1BgClass
              ]"
            >
              {{ tool.icon1 }}
            </div>
            <div
              :class="[
                'flex h-10 w-10 items-center justify-center rounded-md text-lg',
                tool.icon2BgClass
              ]"
            >
              {{ tool.icon2 }}
            </div>
          </div>
        </div>

        <!-- 内容区域 -->
        <div class="flex-1">
          <h3 class="mb-2 text-lg font-semibold text-gray-800">{{ tool.name }}</h3>
          <p class="text-sm leading-relaxed text-gray-600">{{ tool.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import type { ToolItem } from '../data.ts'
  import { emitter } from '@/utils/mitt'

  const props = defineProps<{
    tools: ToolItem[]
  }>()

  const handleToolClick = (tool: ToolItem) => {
    emitter.emit('openByTag', false)
    emitter.emit('openAiTool', { ...tool, tabKey: `${tool.key}-${Date.now()}` })
  }
</script>
